<template>
	<view class="">
		<u-navbar :is-back="true" :border-bottom="false" title="教育经历" height="46" title-color="#333" :title-bold="true"
		 :title-size="36">
			<view class="navbar-right" slot="right" @click="Store">
				确认
			</view>
		</u-navbar>
		<view class="textarea_box">
			<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label-width="150" :label-position="labelPosition" label="学校名称" prop="jyjlxxmc" class="name-box"
				 :label-style="labelStyle">
					<u-input placeholder="请输入学校名称" v-model="form.jyjlxxmc" type="text" :custom-style="{fontSize: '30rpx',}" :height="30"></u-input>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="专业" prop="jyjlzymc" class="name-box"
				 :label-style="labelStyle">
					<u-input placeholder="请输入专业" v-model="form.jyjlzymc" type="text" :custom-style="{fontSize: '30rpx',}" :height="30"></u-input>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="开始时间" prop="jyjlkssj" class="name-box"
				 :label-style="labelStyle">
					<u-input placeholder="请选择开始时间" v-model="form.jyjlkssj" type="text" @click="show = true" :custom-style="{fontSize: '30rpx'}"
					 :height="30" :disabled="true"></u-input>
					<u-picker :mode="mode" v-model="show" @confirm="confirm"></u-picker>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="结束时间" prop="jyjljssj" class="name-box"
				 :label-style="labelStyle">
					<u-input placeholder="请选择结束时间" v-model="form.jyjljssj" type="text" @click="showjssj = true" :custom-style="{fontSize: '30rpx'}"
					 :height="30" :disabled="true"></u-input>
					<u-picker :mode="mode" v-model="showjssj" @confirm="confirmjssj"></u-picker>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="在校经历" prop="jyjljyms" class="name-box"
				 :label-style="labelStyle">
					<u-input v-model="form.jyjljyms" type="textarea" placeholder="您的在校经历的简要描述" height="300" :custom-style="{fontSize: '30rpx'}"
					 :clearable="false" />
				</u-form-item>
			</u-form>
			<view class="" style="text-align: center;margin-top: 30rpx;padding: 0 100rpx;" v-if="mkscdtn">
				<u-button type="success" shape="circle" @click="mkdelete">删除</u-button>
			</view>
			<u-toast ref="uToast" />
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				mkscdtn: false,
				show: false,
				showjssj: false,
				mode: 'time',
				id: "",
				index: "",
				form: {
					jyjlxxmc: '',
					jyjlzymc: '',
					jyjlkssj: '',
					jyjljssj: '',
					jyjljyms: '',
				},
				jyjlData: [],
				// geclcd: "",
				rules: {

				},
				errorType: ['message'],
				labelPosition: "top",
				labelStyle: {
					height: "36rpx",
					fontSize: "24rpx",
					color: "#666666",
				},
			}
		},
		onLoad(options) {

			this.id = options.id
			if (options.index) {
				this.index = options.index
			}
			this.resumemy(options.id)
			console.log(options)
		},
		methods: {
			confirm(e) {
				this.form.jyjlkssj = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd');

			},
			confirmjssj(e) {
				this.form.jyjljssj = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd');
			},
			async mkdelete() {
				this.jyjlData.splice(this.index, 1)
				this.jyjlData = JSON.stringify(this.jyjlData)
				let $t = this
				let params = {
					ak: this.$store.state.token,
					cmd: 'lPeople_myupdate',
					para: {
						"jyjl": this.jyjlData,
						"id": this.id
					}
				}
				const res = await this.$u.api.resumexgdata(params)
				if (res.ResponseID == 0) {
					this.$refs.uToast.show({
						title: res.Message,
						icon: false,
						duration: 800,
						callback() {
							uni.$emit('refreshData');
							uni.navigateBack({
								delta: 1
							})
						}
					})

				}
			},
			async resumemy(id) {
				let params = {
					ak: this.$store.state.token,
					cmd: 'lPeople_myquery',
					para: {
						"id": id,
					}
				}
				const res = await this.$u.api.resumedata(params)
				if(res.Data.jyjl){
					this.jyjlData = JSON.parse(res.Data.jyjl)
				}
				if (this.index) {
					this.mkscdtn = true
					this.form.jyjlxxmc = this.jyjlData[this.index].jyjlxxmc
					this.form.jyjlzymc = this.jyjlData[this.index].jyjlzymc
					this.form.jyjlkssj = this.jyjlData[this.index].jyjlkssj
					this.form.jyjljssj = this.jyjlData[this.index].jyjljssj
					this.form.jyjljyms = this.jyjlData[this.index].jyjljyms
				} else {
					this.index = this.jyjlData.length
					this.jyjlData[this.index] = { ...this.form}
				}
			},
			async Store() {
				this.jyjlData = JSON.stringify(this.jyjlData)
				let $t = this
				let params = {
					ak: this.$store.state.token,
					cmd: 'lPeople_myupdate',
					para: {
						"jyjl": this.jyjlData,
						"id": this.id
					}
				}
				const res = await this.$u.api.resumexgdata(params)
				if (res.ResponseID == 0) {
					this.$refs.uToast.show({
						title: res.Message,
						icon: false,
						duration: 800,
						callback() {
							uni.$emit('refreshData');
							uni.navigateBack({
								delta: 1
							})
						}
					})

				}
			}
		},
		watch: {
			form: {
				handler(newName, oldName) {
					this.jyjlData[this.index] = { ...this.form
					}
					console.log(this.jyjlData)
				},
				immediate: false,
				deep: true,
			}

		},
	}
</script>

<style scoped lang="scss">
	.name-box {
		padding: 30rpx;
	}

	.navbar-right {
		margin-right: 30rpx;
		font-size: 30rpx;
	}
</style>
